<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax邮箱验证唯一性实现</title>
	<style>
		#info{
			width: 300px;
			height: 30px;
			border: 1px solid red;
		}
		#info.success{
			background: blue;
		}
		#info.danger{
			background: red;
		}



	</style>
</head>
<body>
	<!-- 实现邮箱唯一性验证的逻辑步骤：
	1、获得文本框并为它添加离开焦点事件
	2、离开焦点时，检测用户输入的邮箱地址是否符合规则（正则表达式： /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/  ）
	3、如果不符合规则，阻止程序执行并给出提示
	4、向服务器端发送请求，检测邮箱地址是否被别注册
	5、根据服务器端返回的值决定客户端显示何种提示信息 -->





	<!-- 表单页面布局 -->
	<div id="input_box">
		<label >邮箱地址</label>
		<input type="text" id="email_input" placeholder="请输入您的邮箱">
		<!-- 错误的样式danger，正确样式success -->
		<p id="info"></p>



	</div>
	<!-- 引入ajax -->
	<script src="js/03ajax.js"></script>
	<script>
		// 1、获取页面中元素
		var email_input =document.getElementById("email_input");
		var info =document.getElementById("info");
		// 2、当文本框离开焦点以后
		email_input.onblur=function (){
			// 获取用户输入的邮箱
			var email = this.value;
			// 验证邮箱地址准确性的正则表达式
			var reg =/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/ ;
			// 如果用户输入的邮箱地址不符合正则表达式
			if (!reg.test(email)) {
				// 给用户提示信息
				info.innerHTML = "您输入的邮箱不符合规范！";
				// 阻止程序向下执行
				return;
			}
			// 如果正则表达式验证通过，就像服务器发送请求
			ajax({
				type:"get",
				url:"http://localhost:3000/verifyEmailAdress",
				data:{
					email:email,
				},
				success:function(result){
					info.innerHTML="该邮箱有效";
					// info.innerHTML=result.message;
					info.className="success";

				},
				error:function(result){
					info.innerHTML="该邮箱已经被注册";
					// info.innerHTML=result.message;
					info.className="danger";


				}
			})







		}


	</script>

	
</body>
</html>